<template>
    <div style="margin-top: 50px;">
        <el-table max-height="450" border ref="multipleTableRef" @selection-change="handleSelectionChange"
            :data="dataInfo.list" style="width: 80%;margin: 0 auto">
            <el-table-column type="selection" width="55" />
            <el-table-column prop="id" label="编号" width="90" />
            <el-table-column prop="bookName" label="书名" />
            <el-table-column prop="author" label="作者" />
            <el-table-column prop="bookImg" label="图片" />
            <el-table-column prop="create_time" label="创建时间" />
            <el-table-column label="类型">
                <template #default="scope">
                    {{ scope.row.booksType.typeName }}
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button size="small" @click="handleEdit(scope.row)">修改</el-button>
                    <el-button size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination style="justify-content: center; margin-top: 40px;" v-model:current-page="dataQuery.pageNum"
            v-model:page-size="dataQuery.pageSize" :page-sizes="[10, 20, 30, 40]"
            layout="total, sizes, prev, pager, next, jumper" :total="dataInfo.total" @size-change="handleSizeChange"
            @current-change="handleCurrentChange" />
    </div>
</template>

<script lang="ts" setup>
import { getData,delBooks } from '@/service/api/index'
import { ElMessage, ElMessageBox } from 'element-plus';
import { onMounted, ref } from 'vue';

let dataInfo = ref([])
let dataQuery = ref({
    pageNum: 1,
    pageSize: 10,
    bookName: '',
    author: '',
    create_time: '',
    typeName: '',
})
const getDataFun = async () => {
    let dataAsync = await getData(dataQuery.value)
    dataInfo.value = dataAsync.data.data
    console.log(dataInfo.value)
}
const handleSizeChange = () => {
    getDataFun()
}
const handleCurrentChange = () => {
    getDataFun()
}
const handleSelectionChange = () => {

}
const handleEdit = (val: Object) => {

}
const handleDelete = (val: Object) => {
    ElMessageBox.confirm(
        `你确定要删除${val.bookName}吗？`,
        'Warning',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            ElMessage({
                type: 'success',
                message: `${val.bookName}成功删除`,
            })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '删除取消',
            })
        })
}
onMounted(() => {
    getDataFun()
})
</script>

<style lang="scss" scoped>
:deep(.el-table thead th) {
    background: #6f6e6e !important;
    color: #fff !important;
}

:deep(.el-table th.el-table__cell.is-leaf) {
    text-align: center;
}

:deep(.el-table--enable-row-transition .el-table__body td.el-table__cell) {
    text-align: center;
}

:deep(.el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner) {
    background: #999 !important;
    border-color: #999 !important;
}

:deep(.el-pager li.is-active) {
    color: #6f6e6e !important;
}

:deep(.el-checkbox__input.is-indeterminate .el-checkbox__inner) {
    background: #999 !important;
    border-color: #999 !important;
}</style>